<!DOCTYPE html>
<html lang="Zh-CN">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>欢迎来到直播电商平台系统</title>
        <!-- plugins:css -->
        <link rel="stylesheet" href="/static/vendors/mdi/css/materialdesignicons.min.css">
        <link rel="stylesheet" href="/static/vendors/base/vendor.bundle.base.css">
        <!-- endinject -->
        <!-- plugin css for this page -->
        <link rel="stylesheet" href="/static/vendors/datatables.net-bs4/dataTables.bootstrap4.css">
        <!-- End plugin css for this page -->
        <!-- inject:css -->
        <link rel="stylesheet" href="/static/css/style.css">
        <!-- endinject -->
        <link rel="shortcut icon" href="/static/images/favicon.png" />
    </head>
    <body>
        <div class="container-scroller">
            <!--这是顶栏，所有的页面基本上通用-->
            <nav class="navbar col-lg-12 col-12 p-0 d-flex flex-row fixed-top">
                <div class="navbar-brand-wrapper d-flex justify-content-center">
                      <div class="navbar-brand-inner-wrapper d-flex justify-content-between align-items-center w-100">  
                        <a class="navbar-brand brand-logo" href="{% url 'login:index1' %}"><img src="/static/images/logo.svg" alt="logo"/></a>
                        <a class="navbar-brand brand-logo-mini" href="{% url 'login:index1' %}"><img src="/static/images/logo-mini.svg" alt="logo"/></a>
                        <button class="navbar-toggler navbar-toggler align-self-center" type="button" data-toggle="minimize">
                          <span class="mdi mdi-sort-variant">
                          </span>
                        </button>
                      </div>  
                  </div>
                <div class="navbar-menu-wrapper d-flex align-items-center justify-content-end">
                  <ul class="navbar-nav navbar-nav-right">
                    <li class="nav-item dropdown me-4">
                      <a class="nav-link count-indicator dropdown-toggle d-flex align-items-center justify-content-center notification-dropdown" id="notificationDropdown" href="#" data-bs-toggle="dropdown">
                        <i class="mdi mdi-bell mx-0"></i>
                        <span class="count"></span>
                      </a>
                      <div class="dropdown-menu dropdown-menu-right navbar-dropdown" aria-labelledby="notificationDropdown">
                        <!--如果不需要这些功能就删了-->
                        <p class="mb-0 font-weight-normal float-left dropdown-header">待办通知</p>
                        <a class="dropdown-item">
                          <div class="item-thumbnail">
                            <div class="item-icon bg-success">
                              <i class="mdi mdi-information mx-0"></i>
                            </div>
                          </div>
                          <div class="item-content">
                            <h6 class="font-weight-normal">未处理事务</h6>
                            <p class="font-weight-light small-text mb-0 text-muted">
                              您有未处理的订单
                            </p>
                          </div>
                        </a>
                      </div>
                    </li>
                    <li class="nav-item nav-profile dropdown"><!--登录状态-->
                      <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" id="profileDropdown">
                        <img src="/static/images/faces/face-czw.jpg" alt="profile"><!--头像，你们研究一下能不能绑定-->
                        <span class="nav-profile-name">赤之王</span>
                      </a>
                      <div class="dropdown-menu dropdown-menu-right navbar-dropdown" aria-labelledby="profileDropdown">
                        <a class="dropdown-item"><!--摆设，或者链接到注册页面修改密码等-->
                          <i class="mdi mdi-settings text-primary"></i>
                          账户设置
                        </a>
                        <a class="dropdown-item"><!--下线操作-->
                          <i class="mdi mdi-logout text-primary"></i>
                          下班！
                        </a>
                      </div>
                    </li>
                  </ul>
                  <button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button" data-toggle="offcanvas">
                    <span class="mdi mdi-menu"></span>
                  </button>
                </div>
              </nav>
            <div class="container-fluid page-body-wrapper pt-0 proBanner-padding-top">
                <nav class="sidebar sidebar-offcanvas active" id="sidebar">
                    <ul class="nav">
                      <li class="nav-item"><!--这个登录按钮在登录后就通过修改标签消除掉-->
                        <a class="nav-link" href="{% url 'login:index1' %}">
                          <i class="mdi mdi-account menu-icon"></i>
                          <span class="menu-title">登录</span>
                        </a>
                      </li>
                      <li class="nav-item"><!--以下这些子系统，登录后根据账号部门只显示指定部门的连接按钮-->
                        <a class="nav-link" href="{% url 'sales:sale_index' %}">
                          <i class="mdi mdi-account menu-icon"></i>
                          <span class="menu-title">销售系统</span>
                        </a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="{% url 'login:proc_index' %}">
                          <i class="mdi mdi-account menu-icon"></i>
                          <span class="menu-title">采购系统</span>
                        </a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="{% url 'warehouse:warehouse_index' %}">
                          <i class="mdi mdi-account menu-icon"></i>
                          <span class="menu-title">库存系统</span>
                        </a>
                      </li>
                      <li class="nav-item">
                        <a class="nav-link" href="{% url 'login:stream_info' %}">
                          <i class="mdi mdi-account menu-icon"></i>
                          <span class="menu-title">直播信息登记</span>
                        </a>
                      </li>
                    </ul>
                </nav>
                <div class="main-panel">
                  <div class="content-wrapper">
                    <div class="row grid-margin">
                      <div class="d-flex justify-content-between flex-wrap">
                        <div class="d-flex align-items-end flex-wrap">
                          <div class="me-md-3 me-xl-5">
                            <h2>欢迎上班</h2>
                            <p class="mb-md-0">这是系统的数据仪表首页</p>
                          </div>
                          <div class="d-flex">
                            <i class="mdi mdi-home text-muted hover-cursor"></i>
                            <p class="text-muted mb-0 hover-cursor">&nbsp;/&nbsp;Dashboard&nbsp;/&nbsp;</p>
                            <p class="text-primary mb-0 hover-cursor">Analytics</p>
                          </div>
                        </div>
                        <div class="d-flex justify-content-between align-items-end flex-wrap">
                          <!--这里我加了四个整活东西，不用删了-->
                          <button type="button" class="btn btn-light bg-white btn-icon me-3 d-none d-md-block" onclick="audio_loop()">
                            <i class="mdi mdi-download text-muted"></i>
                          </button>
                          <button type="button" class="btn btn-light bg-white btn-icon me-3 mt-2 mt-xl-0" onclick="audio_mute()">
                            <i class="mdi mdi-clock-outline text-muted"></i>
                          </button>
                          <button type="button" class="btn btn-light bg-white btn-icon me-3 mt-2 mt-xl-0" onclick="audio_pause()">
                            <i class="mdi mdi-plus text-muted"></i>
                          </button>
                          <button class="btn btn-primary mt-2 mt-xl-0" onclick="audio_play()">Close in the Distance
                          </button>
                          <audio id="CitD" src="/static/other/494.ogg" loop="true"></audio>
                        </div>
                      </div>
                    </div>
                    <div class="row grid-margin"><!--销售推移折线图，绘图提供动态或静态的图像元素，下面的canvas元素看情况保留，其他图同理-->
                      <div class="card">
                        <div class="card-body">
                          <div class="chartjs-size-monitor">
                            <div class="chartjs-size-monitor-expand">
                              <div class=""></div>
                            </div>
                            <div class="chartjs-size-monitor-shrink">
                              <div class=""></div>
                            </div>
                          </div>
                          <h1 class="card-title">直播间:ZBJ1234</h1>
                          <div style="float:left;width:583px;height:291px">
                            <iframe frameborder=0 src={% url 'login:i_graph1' %} width="100%" height="290px"></iframe>
                          </div>
                          <div style="float:left;width:583px;height:291px">
                            <iframe frameborder=0 src={% url 'login:demo4' %} width="100%" height="290px"></iframe>
                          </div>
                        </div>
                        <div>
                          <div>
                          <h1 class="card-title">直播间:ZBJ1235</h1>
                          <div style="float:left;width:583px;height:291px">
                          <iframe frameborder=0 src={% url 'login:i_graph2' %} width="100%" height="290px"></iframe>
                          </div>
                          <div style="float:left;width:583px;height:291px">
                            <iframe frameborder=0 src={% url 'login:demo5' %} width="100%" height="290px"></iframe>
                          </div>
                          </div>
                        </div>
                        <div>
                              <h1 class="card-title">直播间:ZBJ1236</h1>
                          <div style="float:left;width:583px;height:291px">
                          <iframe frameborder=0 src={% url 'login:i_graph3' %} width="100%" height="290px"></iframe>
                          </div>
                          <div style="float:left;width:583px;height:291px">
                            <iframe frameborder=0 src={% url 'login:demo6' %} width="100%" height="290px"></iframe>
                          </div>
                        </div>
                        <div>
                          <h1 class="card-title">直播间:ZBJ1237</h1>
                          <div style="float:left;width:583px;height:291px">
                          <iframe frameborder=0 src={% url 'login:i_graph4' %} width="100%" height="290px"></iframe>
                          </div>
                          <div style="float:left;width:583px;height:291px">
                            <iframe frameborder=0 src={% url 'login:demo7' %} width="100%" height="290px"></iframe>
                          </div>
                        </div>
                        <div>
                          <h1 class="card-title">直播间:ZBJ1238</h1>
                          <div style="float:left;width:583px;height:291px">
                          <iframe frameborder=0 src={% url 'login:i_graph5' %} width="100%" height="290px"></iframe>
                          </div>
                          <div style="float:left;width:583px;height:291px">
                            <iframe frameborder=0 src={% url 'login:demo8' %} width="100%" height="290px"></iframe>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="row grid-margin"><!--直播间的销售对比柱状图-->
                      <div class="card">
                        <div class="card-body">
                          <div class="chartjs-size-monitor">
                            <div class="chartjs-size-monitor-expand">
                              <div class=""></div>
                            </div>
                            <div class="chartjs-size-monitor-shrink"><div class=""></div>
                          </div>
                        </div>
                          <h1 class="card-title">分直播间的销售对比</h1>

                        </div>
                      </div>
                    </div>
                    <div class="row grid-margin">
                      <!--销售信息总表，根据thead标签下的内容从数据库抓数据填充到tbody里面，每个tr标签代表一行，其他表同理-->
                       <form action="{% url 'login:sa_rank' %}" method="post" id="form1">
                          {% csrf_token %}
                        <div class="form-group">
                  <input type="text" id="mon" class="form-control form-control-lg" name="month_inp" placeholder="月份" required size="5">
                        </div>
                        <div class="mt-3">
                  <input type="submit" id="sub" class="btn btn-block btn-primary btn-lg font-weight-medium auth-form-btn" value="查询排名">
                        </div>
                      </form>
                      <div class="card">

                        <div class="card-body">
                          <h1 class="card-title">销售业绩表</h1>
                          <div class="table-responsive">
                            <table class="table table-striped">
                              <thead>
                                <tr>
                                  <th>销售工号</th>
                                  <th>销售业绩</th>
                                </tr>
                              </thead>
                              {% for i in s %}
                              <tbody>
                                <tr>
                                  <td>{{i.eid.eid}}</td>
                                  <td>{{i.performance_rank}}</td>
                                </tr>
                              </tbody>
                              {% endfor %}
                            </table>
                          </div>
                        </div>
                        <div id="sales" style="width: 1000px;height:600px;"></div>
                      </div>
                    </div>
                    <div class="row grid-margin">
                      <!--商品信息总表，根据thead标签下的内容从数据库抓数据填充到tbody里面，每个tr标签代表一行，其他表同理-->
                      <div class="card">
                        <div class="card-body">
                          <h1 class="card-title">商品信息总表</h1>
                          <div class="table-responsive">
                            <table class="table table-striped">
                              <thead>
                                <tr>
                                  <th>商品代码</th>
                                  <th>商品类别</th>
                                  <th>零售价</th>
                                  <th>销售量</th>
                                  <th>销售额</th>
                                  <th>利润率</th>
                                </tr>
                              </thead>
                              {% for i in si%}
                              <tbody>
                                <tr>
                                  <td>{{i.goods.goods_id}}</td>
                                  <td>{{i.goods.goods_type}}</td>
                                  <td>{{i.goods.gprice}}</td>
                                  <td>{{i.count}}</td>
                                  <td>{{i.sales_num}}</td>
                                  <td>{{i.profit_rate}}</td>
                                </tr>
                              </tbody>
                              {% endfor %}
                            </table>
                          </div>
                          <select id="划分依据" class="btn btn-secondary dropdown-toggle p-0 bg-transparent border-0 text-dark shadow-none font-weight-medium">
                            <option value="细分商品">细分商品</option>
                            <option value="商品种类">商品种类</option>
                          </select><p> </p><input type="button" class="btn btn-block btn-primary btn-sm" value="绘制" onclick="draw()">

                          <div id="goods" style="width: 1500px;height:600px;"></div>
                          <select id="饼图粒度" class="btn btn-secondary dropdown-toggle p-0 bg-transparent border-0 text-dark shadow-none font-weight-medium">
                            <option value="珠宝">珠宝</option>
                              <option value="家电">家电</option>
                              <option value="食品">食品</option>
                              <option value="办公">办公</option>
                              <option value="服装">服装</option>
                              <option value="总览">总览</option>
                          </select><input type="button" value="绘制饼图" class="btn btn-block btn-primary btn-sm" onclick="pie()">
                          <div id="goods_pie2" style="width: 1000px;height:600px;"></div>
                        </div>
                      </div>
                    </div>
                    <div class="row grid-margin"><!--带货主播表-->
                      <div class="card">
                        <div class="card-body">
                          <h1 class="card-title">带货主播信息表</h1>
                          <div class="table-responsive">
                            <div>
                              <form action="{% url 'login:zb' %}" method="post" id="form1">
                          {% csrf_token %}
                        <div class="form-group">
                        </div>
                        <div class="mt-3">
                  <input type="submit" id="zb" class="btn btn-block btn-primary btn-lg font-weight-medium auth-form-btn" value="主播查询">
                        </div>
                      </form>
                            </div>
                            <table class="table table-hover">
                              <thead>

                                <tr>
                                  <th>主播昵称</th>
                                  <th>主播工号</th>
                                  <th>分成比例</th>
                                  <th>成交额</th>
                                  <th>平台</th>
                                </tr>
                              </thead>
                              {% for i in dic %}
                              <tbody>
                                <tr>
                                  <td>{{i.name}}</td>
                                  <td>{{i.id}}</td>
                                  <td>{{i.rate}}</td>
                                  <td>{{i.sum}}</td>
                                  <td>{{i.plat}}</td>
                                </tr>
                              </tbody>
                              {% endfor %}
                            </table>
                          </div>
                            <div id="zb_pie" style="width: 1000px;height:600px;"></div>
                        </div>
                      </div>
                    </div>

                  <footer class="footer">
                    <div class="d-sm-flex justify-content-center justify-content-sm-between">
                      <span class="text-muted text-center text-sm-left d-block d-sm-inline-block">
                        Copyright © 
                        <a href="https://www.bootstrapdash.com/" target="_blank">bootstrapdash.com </a>
                        2021
                      </span>
                      <span class="float-none float-sm-right d-block mt-1 mt-sm-0 text-center">
                        Only the best <a href="https://www.bootstrapdash.com/" target="_blank"> Bootstrap dashboard  </a> 
                        templates
                      </span>
                    </div>
                  </footer>
                </div>
            </div>
        </div>
    <!-- plugins:js -->
    <script src="/static/vendors/base/vendor.bundle.base.js"></script>
    <!-- endinject -->
    <!-- Plugin js for this page-->
    <script src="/static/vendors/chart.js/Chart.min.js"></script>
    <script src="/static/vendors/datatables.net/jquery.dataTables.js"></script>
    <script src="/static/vendors/datatables.net-bs4/dataTables.bootstrap4.js"></script>
    <!-- End plugin js for this page-->
    <!-- inject:js -->
    <script src="/static/js/off-canvas.js"></script>
    <script src="/static/js/hoverable-collapse.js"></script>
    <script src="/static/js/template.js"></script>
    <!-- endinject -->
    <!-- Custom js for this page-->
    <script src="/static/js/dashboard.js"></script>
    <script src="/static/js/data-table.js"></script>
    <script src="/static/js/jquery.dataTables.js"></script>
    <script src="/static/js/dataTables.bootstrap4.js"></script>
    <!-- End custom js for this page-->
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
              <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
    <script src="/static/js/jquery.cookie.js" type="text/javascript"></script>
          <script>
          var myChart = echarts.init(document.getElementById('zb_pie'));
          myChart.setOption({
                          series : [{
                                  name: '{{x_type.0}}',
                                  type: 'pie',    // 设置图表类型为饼图
                                  radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                                  label: {
                                      position: 'outside',
                                      formatter: '{b}:{c} ({d}%)'
                                  },
                                  data:[          // 数据数组，name 为数据项名称，value 为数据项值
                                    {% for data in dic %}
                                      { value : {{ data.sum }}, name : '{{ data.name }}' },
                                    {% endfor %}
                                  ]}
                          ]
                      });
          </script>
              <script>

                var myChart = echarts.init(document.getElementById('sales'));
                var option = {
            title: {
                text: '销售业绩月度图'
            },
            tooltip: {},
            legend: {
                data:["月份"]
            },
            xAxis: {
                data: {{x|safe}}
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: {{y|safe}}
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
              </script>
              <script>
          function draw(){
              var tp = document.getElementById("划分依据");
              var tpp=tp.options[tp.selectedIndex].value;
              var myChart = echarts.init(document.getElementById('goods'));
              if(tpp=="细分商品"){
              var option = {
            title: {
                text: '商品销售指标月度'
            },
            tooltip: {},
            legend: {
                data:["销售额","利润率","业绩达标率","退货率"]
            },
            xAxis: {
                data: {{gx_lis|safe}}
            },
             yAxis : [{
              type: 'value',
              name:'额度',
              min: 0,
              max: 22000,
              interval: 22000/5,
              splitNumber: 5, //设置坐标轴的分割段数
            },
            {
              type: 'value',
              name:'比率',
              min: 0,
              max: 1,
              interval: 0.1,
              splitNumber: 10, //设置坐标轴的分割段数
            }],
            series: [{
                name: '销售额',
                type: 'bar',
                barWidth : 20,
                barGap:'-90%',
                data: {{gy3_lis|safe}}
            },{
              name: '利润率',
              type:'line',
              color:'purple',
              yAxisIndex: 1,
              data: {{gy1_lis|safe}}
            },{
              name: '业绩达标率',
              type:'line',
              color:'red',
              yAxisIndex: 1,
              data: {{gy2_lis|safe}}
            },{
              name: '退货率',
              type:'line',
              color:'blue',
              yAxisIndex: 1,
              data: {{gy4_lis|safe}}
            }]
        };
        myChart.setOption(option);
          }
        else{
              var option = {
            title: {
                text: '商品销售指标月度'
            },
            tooltip: {},
            legend: {
                data:["销售额","利润率","业绩达标率","退货率"]
            },
            xAxis: {
                data: {{x_type|safe}}
            },
             yAxis : [{
              type: 'value',
              name:'额度',
              min: 0,
              max: 30000,
              interval: 30000/5,
              splitNumber: 5, //设置坐标轴的分割段数
            },
            {
              type: 'value',
              name:'比率',
              min: 0,
              max: 0.5,
              interval: 0.05,
              splitNumber: 10, //设置坐标轴的分割段数
            }],
            series: [{
                name: '销售额',
                type: 'bar',
                barWidth : 20,
                barGap:'-90%',
                data: {{gy30_lis|safe}}
            },{
              name: '利润率',
              type:'line',
              color:'purple',
              yAxisIndex: 1,
              data: {{gy10_lis|safe}}
            },{
              name: '业绩达标率',
              type:'line',
              color:'red',
              yAxisIndex: 1,
              data: {{gy20_lis|safe}}
            },{
              name: '退货率',
              type:'line',
              color:'blue',
              yAxisIndex: 1,
              data: {{gy40_lis|safe}}
            }]
        };
        myChart.setOption(option);
          }
        }

              </script>
              <script>
          function pie(){
              var tp = document.getElementById("饼图粒度");
              var tpp=tp.options[tp.selectedIndex].value;
              var myChart = echarts.init(document.getElementById('goods_pie2'));
              switch(tpp){
                case '{{x_type.0}}':
                          myChart.setOption({
                          series : [{
                                  name: '{{x_type.0}}',
                                  type: 'pie',    // 设置图表类型为饼图
                                  radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                                  label: {
                                      position: 'outside',
                                      formatter: '{b}:{c} ({d}%)'
                                  },
                                  data:[          // 数据数组，name 为数据项名称，value 为数据项值
                                    {% for data in dic1 %}
                                      { value : {{ data.value }}, name : '{{ data.name }}' },
                                    {% endfor %}
                                  ]}
                          ]
                      })
                  break;
                case '{{x_type.1}}':
                          myChart.setOption({
                          series : [{
                                  name: '{{x_type.1}}',
                                  type: 'pie',    // 设置图表类型为饼图
                                  radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                                  label: {
                                      position: 'outside',
                                      formatter: '{b}:{c} ({d}%)'
                                  },
                                  data:[          // 数据数组，name 为数据项名称，value 为数据项值
                                    {% for data in dic2 %}
                                      { value : {{ data.value }}, name : '{{ data.name }}' },
                                    {% endfor %}
                                  ]}
                          ]
                      })
                  break;
                case '{{x_type.2}}':
                          myChart.setOption({
                          series : [{
                                  name: '{{x_type.2}}',
                                  type: 'pie',    // 设置图表类型为饼图
                                  radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                                  label: {
                                      position: 'outside',
                                      formatter: '{b}:{c} ({d}%)'
                                  },
                                  data:[          // 数据数组，name 为数据项名称，value 为数据项值
                                    {% for data in dic3 %}
                                      { value : {{ data.value }}, name : '{{ data.name }}' },
                                    {% endfor %}
                                  ]}
                          ]
                      })
                  break;
                case '{{x_type.3}}':
                          myChart.setOption({
                          series : [{
                                  name: '{{x_type.3}}',
                                  type: 'pie',    // 设置图表类型为饼图
                                  radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                                  label: {
                                      position: 'outside',
                                      formatter: '{b}:{c} ({d}%)'
                                  },
                                  data:[          // 数据数组，name 为数据项名称，value 为数据项值
                                    {% for data in dic4 %}
                                      { value : {{ data.value }}, name : '{{ data.name }}' },
                                    {% endfor %}
                                  ]}
                          ]
                      })
                  break;
                case '{{x_type.4}}':
                          myChart.setOption({
                          series : [{
                                  name: '{{x_type.4}}',
                                  type: 'pie',    // 设置图表类型为饼图
                                  radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                                  label: {
                                      position: 'outside',
                                      formatter: '{b}:{c} ({d}%)'
                                  },
                                  data:[          // 数据数组，name 为数据项名称，value 为数据项值
                                    {% for data in dic5 %}
                                      { value : {{ data.value }}, name : '{{ data.name }}' },
                                    {% endfor %}
                                  ]}
                          ]
                      })
                  break;
                case '总览':
                          myChart.setOption({
                          series : [{
                                  name: '总览',
                                  type: 'pie',    // 设置图表类型为饼图
                                  radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                                  label: {
                                      position: 'outside',
                                      formatter: '{b}:{c} ({d}%)'
                                  },
                                  data:[          // 数据数组，name 为数据项名称，value 为数据项值
                                    {% for data in dic0 %}
                                      { value : {{ data.value }}, name : '{{ data.name }}' },
                                    {% endfor %}
                                  ]}
                          ]
                      })
                  break;
              }
        }

              </script>


    <script>
    var ado=document.getElementById('CitD')
    function audio_pause(){
      ado.pause();
    }
    function audio_play(){
      ado.play();
    }
    function audio_mute(){
      if(ado.muted)
      ado.muted = false;
      else
      ado.muted = true;
    }
    function audio_loop(){
      if(ado.loop)
      ado.loop = false;
      else
      ado.loop = true;
    }
    </script>
      </body>
</html>